<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>宠物店数据</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <META http-equiv=Content-Type content="text/html; charset=utf-8">
    <META content="MSHTML 6.00.3790.4807" name=GENERATOR>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover">
<meta http-equiv="x-dns-prefetch-control" content="on">
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=5749ce65dd16f6d8456d5183c5d1a908&plugin=AMap.MapType,AMap.ToolBar,AMap.Driving,AMap.PlaceSearch,AMap.DistrictLayer,AMap.Scale"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none
        }
        html, body{
            height: 100%;
            width: 100%;
        }
        #container {
            height: 100%;
            width: 100%;
            font-size: 14px;
            font-family: "Chinese Quote", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"
        }
        #query {
            height: 120px;
            line-height: 40px;
            width: 100%;
            position: fixed;
            bottom:0;
            left:0;
            right:0;
            z-index: 9999;
            background-color: #ccc;
        }
        #query .item {
            background-color: #ccc;
        }
        #query .item input {
            height: 38px;
            width: 100%;
            padding-right: 25px;
            font-family: SimHei;
            font-size: 1rem;
            color: #666;
            outline: 0;
            border: 0 none;
            text-indent: .5em;
            border-bottom: 1px solid #3d92fb;
        }
        #query .item #doMarkBtn {
            height: 38px;
            width: 100%;
        }
        .content-window-card{position:relative;box-shadow:none;bottom:0;left:0;width:auto;padding:0;border-radius:5px;overflow:hidden;}
        .info-top{padding:10px 15px;position:relative;background:#fff;border-bottom:1px solid #ebebeb;}
        .closeX{position:absolute;right:10px;top:2px;font-size:22px;cursor:pointer}
        .info-middle{padding:15px 15px;border-radius:0 0 5px 5px;}
        .info-bottom{height:12px;position:relative}
        .sharp{width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-top:12px solid #fff;position:absolute;left:50%;top:0;transform:translate(-50%,0)}
        .STYLE1 {   color: #FFFFFF;
            font-weight: bold;
            font-size: 18px;
        }
        .STYLE2 {
            color: #FF0000;
            font-weight: bold;
        }
        .STYLE3 {font-size: 12px}
    </style>
</head>
<body>


<div id="container" class="amap-container" style="position: relative; background: rgb(252, 249, 242);">
</div>


<script>
    var map = new AMap.Map('container', {
        resizeEnable: true,
        zoom: 11.5,
        center: [116.591211,39.771481],

        buildingAnimation: false, //楼块出现是否带动画
        //前往创建自定义地图样式：https://lbs.amap.com/dev/mapstyle/index
    });
//mapStyle: 'amap://styles/ac617ee5ac942dc438bc8ae1b99b7939',
    map.addControl(new AMap.MapType({
        defaultType:0 //0代表默认，1代表卫星
    }));

    var cityPoiMap = {
        110101: {name: "东城区", cnt: 0, cnt:0 ,lng:116.397477, lat: 39.945371},  
        110102: {name: "西城区", cnt: 0 , lng:116.353128, lat: 39.911318},
        110105: {name: "朝阳区",  cnt: 0, lng: 116.601144, lat: 39.948574}, 
        110106: {name: "丰台区",  cnt: 0, lng: 116.402722, lat: 39.877385 }, 
        110107: {name: "石景山区", cnt: 0, lng: 116.16004, lat: 39.940569  },   
        110108: {name: "海淀区", cnt: 0, lng: 116.239756, lat: 40.050246}, 
        110109: {name: "门头沟区", cnt: 0,lng: 115.908906, lat: 40.003303},   
        110111: {name: "房山区", cnt: 0, lng: 115.821612, lat: 39.663408}, 
        110112: {name: "通州区",cnt: 0, lng: 116.635075, lat: 39.7441},    
        110113: {name: "顺义区", cnt: 0,  lng: 116.690213, lat: 40.182488}, 
        110114: {name: "昌平区", cnt: 0, lng: 116.204948, lat: 40.264765},   
        110115: {name: "大兴区", cnt: 0, lng: 116.323273, lat: 39.635331},  
        110116: {name: "怀柔区", cnt: 0, lng: 116.488761, lat: 40.466866},  
        110117: {name: "平谷区", cnt: 0, lng: 117.238391, lat: 40.189642}, 
        110118: {name: "密云区",  cnt: 0, lng: 116.888202, lat: 40.403538},  
        110119: {name: "延庆区", cnt: 0, lng: 115.994632, lat: 40.45261}   
    }
 
    var cityPoiArr = [110100,110101,110102,110105,110106,110107,110108,110109,110111,110112,110113,110114,110115,110116,110117,110118,110119 ]
 
    var curCode = 110100;
    var curpi = 0 ;
 
    for(var adcode in cityPoiMap) {
        curCode = adcode;
        (function(adcode, cityName){
            console.info('正在处理' + adcode);
            var allPoiList = [];
            var keyValMap = [];
         
            for(var pi=1; pi<=20; pi++) {
                // 高德地图请求快了，后面是空数据
                (function(pi){
                    var timeout = 1000 * pi;
                    setTimeout(function(){
                        console.info("pi:" + pi)
                        var placeSearch = new AMap.PlaceSearch({
                          // city 指定搜索所在城市，支持传入格式有：城市名、citycode和adcode
                          city: adcode + '',//通州adcode
                          pageSize: 50,
                          pageIndex: pi
                        })

                        placeSearch.search('宠物', function (status, result) {
                           // 查询成功时，result即对应匹配的POI信息
                           console.info(status, result)
                           if(result.poiList && result.poiList.count>0) {
                                for(var i=0; i<result.poiList.pois.length; i++) {
                                    allPoiList.push(result.poiList.pois[i]);
                                }
                           }

                           cityPoiMap[adcode].cnt = allPoiList.length;

                        })

                        curpi = pi;

                    }, timeout);
                })(pi);
            }

            var placeSearch = new AMap.PlaceSearch({
              // city 指定搜索所在城市，支持传入格式有：城市名、citycode和adcode
              city: adcode,//通州adcode
              pageSize: 10
            })

            placeSearch.search('宠物', function (status, result) {
               // 查询成功时，result即对应匹配的POI信息
               // console.info(status, result);
               if(result.info == 'OK') {
                   
               }
            })
        })(adcode, cityPoiMap[adcode]);
    }

    

    var itv = setInterval(function() {
        if(curCode == 110119 && curpi == 20) {
            var disProvince = new AMap.DistrictLayer.Province({
                zIndex: 12,
                adcode: cityPoiArr,
                depth: 2,
                styles: {
                    'fill': function (properties) {
                            // return 'rgb(158,158,255)';
                            var adcode = properties.adcode;
                            return getColorByAdcode(adcode, cityPoiMap[adcode].cnt);
                        },
                    'province-stroke': 'cornflowerblue',
                    'city-stroke': 'white', // 中国地级市边界
                    'county-stroke': 'rgba(255,255,255,0.5)' // 中国区县边界
                }
            });

            disProvince.setMap(map);

            clearInterval(itv);
            console.info(cityPoiMap);

            for(var adcode in cityPoiMap) {
                 var text = new AMap.Text({
                    position: new AMap.LngLat(cityPoiMap[adcode].lng, cityPoiMap[adcode].lat),
                    text: cityPoiMap[adcode].cnt,
                    draggable: false,
                    style:{
                        'border-radius': '40px',
                        'background-color': 'white',
                        'text-align': 'center',
                        'font-size': '14px',
                        'color': 'blue',
                        'width': '40px',
                        'height': '40px',
                        'line-height': '40px',
                         'border-width': '0px' 
                    }
                })
                map.add(text);
            }

        }  


    }, 1000);


    var getColorByAdcode = function (adcode, cnt) {
        var rgb = "rgb(255, 246, 143)";
        if(cnt > 0) {
            rgb = "rgb(255, 246, 143)";
        } 
         if(cnt > 25) {
            rgb = "rgb(255, 228, 225)";
        } 
         if(cnt > 50) {
            rgb = "rgb(255, 222, 173)";
        } 
         if(cnt > 100) {
            rgb = "rgb(255, 193, 193)";
        } 
         if(cnt > 200) {
            rgb = "rgb(255, 140, 0)";
        } 
         if(cnt > 300) {
            rgb = "rgb(255, 127, 80)";
        } 
         if(cnt > 400) {
            rgb = "rgb(255, 110, 180)";
        } 
         if(cnt > 500) {
            rgb = "rgb(255, 69, 0)";
        } 
         if(cnt > 600) {
            rgb = "rgb(255, 48, 48)";
        } 
         if(cnt > 700) {
            rgb = "rgb(255, 51, 51);";
        }
        return rgb;
    };


</script>
</body>
</html>